<template>
	<view class="yjFanKui">
		<view class="m-form">
			<view class="m-title">
				<text>反馈类型</text>
			</view>
			<view class="mt20">
				<u-radio-group v-model="params.feed_type" placement="row" labelSize="24" labelColor="#666666">
					<u-radio
						v-for="(item, index) in list"
						:key="index"
						@change="typebtn"
						size="28rpx"
						iconSize="22rpx"
						shape="square"
						activeColor="#E54E4E"
						:customStyle="{ marginBottom: '8px', marginRight: '26rpx', fontSize: '24rpx' }"
						:name="item.name"
					>
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="fkcontent">
			<view class="m-title">
				<text>反馈与建议</text>
			</view>
			<u--textarea class="yijian-content mt20" v-model="params.content" placeholder="请您写出对平台的反馈及意见" count maxlength="100" height="280rpx"></u--textarea>

			<view class="scimg">
				<u-upload width="202rpx" height="198rpx" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10">
					<view class="upimgbox">
						<image src="@/static/images/zu5550.png" mode="aspectFit"></image>
					</view>
				</u-upload>
			</view>

			<!-- <view class="code">
				<view class="code-box">
					<text>验证码：</text>
					<input placeholder="请输入验证码" v-model="code" />
				</view>
				<identifying-code></identifying-code>
			</view> -->
		</view>
		<footer-btn text="提交意见反馈" @submit="submit"></footer-btn>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imageList: [],
			fileList1: [],
			params: {
				feed_type: '意见',
				content: '',
				originalPic: ''
			},
			paramsTip: {
				content: '反馈内容不能为空'
			},
			type: '',
			list: [
				{
					name: '意见',
					disabled: false
				},
				{
					name: '反馈',
					disabled: false
				}
			],
			checkid: 0,
			code: ''
		};
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			this.get_type();
		},
		get_type() {
			this.$http.getJson('getGuestBookType', {}, 'POST').then((res) => {
				if (res.code === 1) {
					this.list = res.data;
				}
			});
		},
		async submit() {
			if (!this.params.content) {
				this.msg('请输入内容');
				return false;
			}
			// console.log(this.vuex_code, '验证码');
			// if (this.code != this.vuex_code) {
			// 	this.msg('请输入正确的验证码');
			// 	return false;
			// }
			// for (let i in this.paramsTip) {
			// 	if (this.$u.test.empty(this.params[i])) {
			// 		this.msg(this.paramsTip[i]);
			// 		return false;
			// 	}
			// }
			/* if(!this.$u.test.mobile(this.params.phone)){
					msg('手机号格式错误')
					return false
				} */
			//this.params.images = this.imageList.join(',')

			this.$http.getJson('index_feedback', this.params).then((res) => {
				let { code, data, message } = res;
				if (code == 1) {
					this.msg(message, () => {
						this.toBack();
					});
				} else {
					this.msg(message);
				}
			});
		},
		delImg(index) {
			this.imageList.splice(index, 1);
		},
		typebtn(e) {
			console.log(e, 'ddd');
			//this.checkid = index
			this.params.feed_type = e;
			this.list.forEach((item, index) => {
				if (item.name == e) {
					this.list[index].disabled = true;
				}
			});
		},
		

		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(file) {
			return new Promise((resolve, reject) => {
				let a = this.$http
					.getUpload(
						'index_ossupload',
						file,
						{
							if_touxiang: 0
						},
						'img'
					)
					.then((res) => {
						if (res.code == 1) {
							resolve(res.image);
						} else {
							this.msg(res.message);
						}
					});
			});
		}
	}
};
</script>

<style lang="less" scoped>
.yjFanKui {
}
.scimg {
	margin-top: 34rpx;
	.upimgbox {
		image {
			width: 202rpx;
			height: 198rpx;
			border-radius: 16rpx;
			overflow: hidden;
		}
	}
}
.m-form {
	display: flex;
	flex-direction: column;
	margin: 25rpx;
	padding: 25rpx;
	border-radius: 8rpx;
	background: #fff;
}
.m-text {
	flex: 1;
	height: 200rpx;
	border-radius: 10rpx;

	textarea {
		width: 100%;
		height: 100%;
	}
}

.m-img-list {
	display: flex;
	flex-wrap: wrap;
	margin-top: 60rpx;

	.m-img-item {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		text-align: center;
		line-height: 150rpx;
		background: #f4f4f4;
		border-radius: 10rpx;
		font-size: 30rpx;
		color: #cacaca;
		margin-right: 20rpx;

		.m-img-close {
			position: absolute;
			top: -15rpx;
			right: -15rpx;
			width: 30rpx;
			height: 30rpx;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 30rpx;
			border-radius: 50%;
			// background: rgba(@basecolor: #000000, @basecolor: 0.5);
		}

		image {
			width: 100%;
			height: 100%;
		}
	}
}

.m-input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 25rpx;
	width: 650rpx;
	height: 90rpx;
	border: 1px solid #dddddd;
	border-radius: 10rpx;

	text {
		font-size: 26rpx;
		color: #222;
	}

	input {
		flex: 1;
		text-align: right;
	}
}

.m-btn {
	width: 650rpx;
	background: @basecolor;
	border-radius: 50rpx;
	text-align: center;
	font-size: 26rpx;
	color: #fff;
	padding: 20rpx 0;
	position: fixed;
	bottom: 100rpx;
}
.m-title {
	font-size: 28rpx;
	font-family: PingFang SC-Bold, PingFang SC;
	font-weight: bold;
	color: #000000;
	margin-bottom: 18rpx;
}
/deep/ .u-radio-group {
	display: flex;
}

.fkcontent {
	margin: 16rpx 32rpx;
	background: #ffffff;
	padding: 26rpx 24rpx 32rpx;

	.yijian-content {
		background: #f6f7fb;
		margin-top: 12rpx;
		border-radius: 8rpx;
		padding: 18rpx 16rpx 20rpx;
	}
	.code {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		.code-box {
			display: flex;
			align-items: center;
			flex: 1;
			font-size: 30rpx;
			color: #222;
			font-weight: 800;
			white-space: nowrap;
			text {
				margin-right: 8rpx;
			}
		}
	}
}
</style>
